<template>
	<view class="hui b_width">
		<u-navbar title=" " :placeholder="true" bgColor="#3C7CFF">
			<view slot="left"></view>
		</u-navbar>
		<view class="blue_box">
			<image class="yuan" mode="widthFix" src="@/static/img/my/yuan.png"></image>
			<view class="user_box">
				<image class="logo" :src="user.avatar"></image>
				<view v-if="token">
					<view class="name">{{user.nickname}}</view>
					<view class="mobile">{{user.phone}}</view>
				</view>
				<view v-else @click="getWxInfo()">
					<button hover-class="none" class="button" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">
						请登录
					</button>
				</view>
				<view class="my_box" @click="toUserSave()">
					<image class="icon" mode="widthFix" src="@/static/img/my/my.png"></image>
					<view>个人中心</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<view class="icon_box">
				<view class="ph_box" v-for="(item,index) in iconList" :key="index">
					<view class="b_flex_c_s">
						<view class="i_name">{{item.name}}</view>
						<view class="b_flex_c" @click="toClicks(index)">
							<view class="i_qb">查看全部</view>
							<image class="right" mode="widthFix" src="@/static/img/my/right.png"></image>
						</view>
					</view>
					<view :class="[index==0||index==1?'list_box1':'list_box','b_flex_c_s']">
						<view class="l_info " v-for="(items,indexs) in item.list" :key="indexs" @click="toClick(items)">
							<image class="l_img" mode="aspectFit" :src="items.img"></image>
							<view>{{items.name}}</view>
						</view>
					</view>
				</view>
				<view class="ph_box">
					<view :class="[index+1<bIconList.length?'b_bottom_border':'', 'b_flex_c_s',' b_icon_box']"
						v-for="(item,index) in bIconList" :key="index" @click="toPath(item)">
						<view class="b_flex_c">
							<image class="b_img" mode="aspectFit" :src="item.img"></image>
							<view>{{item.name}}</view>
						</view>
						<image class="right" mode="widthFix" src="@/static/img/my/rights.png"></image>
					</view>
				</view>
			</view>
		</view>
		<Bootm value="我的"></Bootm>
	</view>
</template>

<script>
	import Bootm from "@/components/bottom.vue";
	import {
		userLogin,
		userPhone,
		userInfo
	} from "@/require/api.js";
	export default {
		components: {
			Bootm
		},
		data() {
			return {
				token: '',
				user: {
					nickname: '',
					phone: '',
					avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
				},
				iconList: [{
						name: '陪护床订单',
						list: [{
								img: require('@/static/img/my/order.png'),
								name: '全部订单',
								type: 1
							},
							{
								img: require('@/static/img/my/shi.png'),
								name: '使用中',
								type: 2
							},
							{
								img: require('@/static/img/my/wc.png'),
								name: '已完成',
								type: 3
							},
						]
					},
					{
						name: '租凭订单',
						list: [{
								img: require('@/static/img/my/zdsh.png'),
								name: '全部订单',
								type: 111
							},
							{
								img: require('@/static/img/my/zsyz.png'),
								name: '使用中',
								type: 222
							},
							{
								img: require('@/static/img/my/zysh.png'),
								name: '已归还',
								type: 333
							},
						]
					},
					{
						name: '商城订单',
						list: [{
								img: require('@/static/img/my/dfk.png'),
								name: '待付款'
							},
							{
								img: require('@/static/img/my/dfh.png'),
								name: '待发货'
							},
							{
								img: require('@/static/img/my/dsh.png'),
								name: '待收货'
							},
							{
								img: require('@/static/img/my/ywc.png'),
								name: '已完成'
							},
						]
					}
				],
				bIconList: [
					{
						name: '我的押金',
						img: require('@/static/img/my/byj.png'),
						url: '/pages/user/deposit'
					},
					{
						name: '收货地址',
						img: require('@/static/img/my/bdz.png')
					},
					{
						name: '故障反馈',
						img: require('@/static/img/my/bgzfk.png'),
						url: '/pages/user/feedback'
					},
					{
						name: '关于我们',
						img: require('@/static/img/my/bmy.png'),
						url: '/pages/user/about'
					},
					{
						name: '新手指南',
						img: require('@/static/img/kf.png'),
						url:'/pages/lock/guide'
					}
				],
				params: {
					nickName: '微信用户',
					avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					code: '',
					city: '',
					country: '',
					headimgurl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					openId: '',
					province: '',
					sex: '',
					spread_spid: 0,
					type: 'routine'
				},
				phoneParams: {
					encryptedData: '',
					iv: '',
					code: '',
					key: '',
					type: 'routine'
				},
			}
		},
		onLoad() {

		},
		onShow() {
				this.$project.getNetwork();
			this.token = uni.getStorageSync('qlbToken');
			this.getUserInfo();
		},
		methods: {
			toClicks(index) {
				switch (index) {
					case 0:
						this.$project.toPath('/pages/bed/index');
						break;
					case 1:
						this.$project.toPath('/pages/lease/list');

						break;
					case 2:
						this.$project.toast('正在建设中,敬请期待');
						break;
				}
			},
			toClick(item) {
				switch (item.type) {
					case 1:
						this.$project.toPath('/pages/bed/index?status=' + '');
						break;
					case 2:
						this.$project.toPath('/pages/bed/index?status=' + 0);
						break;
					case 3:
						this.$project.toPath('/pages/bed/index?status=' + 1);
						break;
					case 111:
						this.$project.toPath('/pages/lease/list?status=' + '');
						break;
					case 222:
						this.$project.toPath('/pages/lease/list?status=' + 0);
						break;
					case 333:
						this.$project.toPath('/pages/lease/list?status=' + 1);
						break;
					default:
						this.$project.toast('正在建设中,敬请期待');
				}
			},
			toPath(item) {
				this.$project.toPath(item.url);
			},
			toUserSave() {
				if (!this.token) {
					return this.$project.toast('请登录');
				}
				this.$project.toPath('/pages/user/update');
			},
			async getUserInfo() {
				if (!this.token) return;
				let {
					data
				} = await userInfo();
				this.user = data;
				this.user.phone = this.$project.getMobileSlice(data.phone);
				
				if (data.isAdmin) {
					this.bIconList[5] = {
						name: '工作台',
						img: require('@/static/img/my/tool.png'),
						url: '/pages/tool/item'
					}
				} else {
					 if(this.bIconList[5]){
						  this.bIconList.splice(5,1);
					 }
				}
			},
			getWxInfo() {
				if (this.token) {
					return;
				}
				let _ = this;
			
				uni.getUserProfile({
					desc: '授权确认',
					success(res) {
						
						let {
							nickName,
							avatarUrl,
							gender
						} = res.userInfo;
						_.params.nickName = nickName;
						_.params.avatar = avatarUrl;
						_.params.headimgurl = avatarUrl;
						_.params.sex = gender;

						uni.login({
							provider: 'weixin',
							success(ress) {
								_.params.code = ress.code;
								userLogin(_.params, ress.code).then(data => {
									_.phoneParams.key = data.data.key;
									if (!data.data.key) {
										uni.setStorageSync('qlbToken', data.data.token);
										_.token = data.data.token;
										_.getUserInfo();
									}
								});
							}
						})

					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getPhoneNumber(e) {

				setTimeout(() => {
					this.wxLogin(e);
				}, 1500)

			},
			wxLogin(e) {

				let _ = this;
				if (!_.phoneParams.key) return;
				uni.login({
					provider: 'weixin',
					success(ress) {
						console.log(ress);
						_.phoneParams.code = ress.code;

						let {
							encryptedData,
							iv
						} = e.detail;

						_.phoneParams.encryptedData = encryptedData;
						_.phoneParams.iv = iv;

						userPhone(_.phoneParams).then(data => {
							uni.setStorageSync('qlbToken', data.data.token);
							_.token = data.data.token;
							_.getUserInfo();
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.blue_box {
		background-color: #3C7CFF;
		width: 100%;
		height: 400rpx;
		position: relative;
		left: 0;
	}

	.yuan {
		width: 300rpx;
		position: absolute;
		left: -70rpx;
	}

	.logo {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user_box {
		position: absolute;
		left: 0;
		box-sizing: border-box;
		padding: 90rpx 0 0 30rpx;
		display: flex;
		align-items: center;
		color: #fff;
		width: 100%;
	}

	.name {
		font-size: 35rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.mobile {
		font-size: 28rpx;
	}

	.my_box {
		//width: 210rpx;
		height: 70rpx;
		background: #74A1FC;

		border-radius: 32rpx 0 0 32rpx;
		margin-left: auto;
		display: flex;
		align-items: center;
		color: #fff;
		line-height: 70rpx;
		box-sizing: border-box;
		padding: 0 25rpx
	}

	.icon {
		width: 30rpx;
		margin-right: 15rpx;
	}

	.bottom_box {
		background-color: #F4F4F4;
		border-radius: 30rpx 30rpx 0 0;
		width: 100%;

		position: relative;
		top: -30rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.icon_box {
		position: relative;
		top: -85rpx;
	}

	.right {
		width: 12rpx;
	}

	.ph_box {
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
	}

	.i_name {
		color: #252B50;
	}

	.i_qb {
		font-size: 25rpx;
		color: #9296AF;
		font-weight: 500;
		margin-right: 20rpx;
	}

	.list_box {
		box-sizing: border-box;
		padding: 40rpx 0 20rpx 0;
	}

	.list_box1 {
		box-sizing: border-box;
		padding: 40rpx 40rpx 20rpx 40rpx;
	}

	.l_info {
		text-align: center;
	}

	.l_img {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.b_img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.b_icon_box {
		box-sizing: border-box;
		padding: 40rpx 20rpx;

	}

	.b_bottom_border {
		border-bottom: 1rpx solid #F8F8F8;
	}

	.button {
		padding: 0;
		margin: 0;
		background-color: transparent;
		color: #fff;
	}

	.button::after {
		border: none;
	}

	.button-hover {
		color: rgba(0, 0, 0, 0.6);
	}
</style>